<template>
	<view>  
			<view  v-if="JSON.stringify(confirm) !== '{}'">
			   <approverMsg :value="confirm"></approverMsg>			
			</view>
			<navigator class="left_box" v-if='dessert[0].order_id' :url="'/pages/order/detail/detail?order_id='+dessert[0].order_id">
				<text>查看定单详情</text>
			</navigator>
			<view class="hotelService" >
				<view  v-for="(itemD,indexD) in dessert" :key="indexD">
					<view class="title">
						<text class="name">点心信息({{indexD+1}})</text>
						<text class="delete" @click="deleteDessert(indexD)">删除</text>
					</view>
					<view class="content">
						<!-- dessert_id -->
						<view class="box">
							<text>品牌</text>
							<picker @change="chooseDessert" :disabled="isEdit"  :data-type="indexD"  range-key="title" :range="dessertList">
							    <view class="choose"  v-if="JSON.stringify(dessertList)!='[]'">
									 <text :class="itemD.dessertIndex!==''?'active':''">{{itemD.dessertIndex===''?'请选择':dessert[indexD].dessert_text}}</text>
									 <image v-if="itemD.dessertIndex===''" src="../../../static/images/right.png" mode=""></image>
							    </view>
							</picker>
							<icon class="icon" v-if="itemD.dessertIndex!==''"  type="clear" size="22upx"  @click="deleteDian(indexD)"></icon>
						</view>
						<view class="box">
							<text>数量</text>
							<input type="digit" :disabled="isEdit" v-model="itemD.dessert_amount"  placeholder="请输入" placeholder-style="color:#999999;" />
						</view>
						<view class="box">
							<text>金额</text>
							<input type="digit" :disabled="isEdit" v-model="itemD.dessert_price"  placeholder="请输入" placeholder-style="color:#999999;" />
						</view>
						<view class="remark">
							<text>备注</text>
							<textarea type="text"  :disabled="isEdit" v-model="itemD.dessert_remark" placeholder="请输入备注" placeholder-style="color:#999999;" />
						</view>
					</view>
				</view>
				<view class="addDetail" @click="addDessert">
					增加明细
				</view>
			</view>
			<button type="default" class="order_btn" @click="saveFn()" v-if="options.api">保存</button>
			<auditProcess :value="confirmList" :btnValue="buttons" :isShowBtn="options.api?false:true" @resubmit='resubmits'></auditProcess>	
	</view>
</template>

<script>
	import approverMsg from "@/component/approverMsg.vue";//审核流程
	import auditProcess from "@/component/auditProcess.vue";//审核流程
	import selectBox from "@/component/selectBox.vue"
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import navigation from "@/component/navigation.vue"
	import sun from '@/utils/sun.js'
	export default {
		components: {
			navigation,
			timeSelector,
			selectBox,
			approverMsg,
			auditProcess
		},
		data() {
			return {
				isEdit:false,
				options:'',
				dessert: [
					{   
						dessert_id:'',
						dessert_text:'',
						dessert_amount:"",//数量
						dessert_price:"",//金额
						dessert_remark:"",//备注
						dessertIndex:''
					}
				], // 糕点
				dessertList:[],
				confirmList:[],
				buttons:[],
				confirm:{},//审批信息
			}
		},
		onLoad(options) {
			//审核查看
			if(options.lookApproval){
				this.options= JSON.parse(options.lookApproval)
				this.isEdit =true;
				//查看信息
				this.getDetail(this.options)	
			}	
			//添加
			if(options.params){
			   this.options= JSON.parse(options.params);
			   this.getData(this.options)//获取picker				
			}
			
			//查看
			if(options.id){				
			   this.options= options;
			   this.isEdit = true;
			   //查看信息
			   this.getDetail(this.options)			 
			}
		},
		methods: {
			//获取查看信息
			getDetail(e){
			  let that=this										
			  sun.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token:true,
				data:{
					id:e.id,
					type:e.user?'confirm_user':'',
				},
				success(res) {				
					if(res.code==200){								   
					   that.dessert=res.data.detail.dessert;	
					   that.confirmList=res.data.confirmList;	
					   that.confirm=res.data.confirm;//代表的是当前审核的信息
					   that.buttons=res.data.buttons;
					   //判断是否可以编辑
					   that.buttons.map((item,index)=>{
						   if(item.id=='update'){
						   	  that.isEdit = false;
						   }
					   })
					   that.dessertList=res.data.dessertList?res.data.dessertList:''
					   that.dessert.map((item,index)=>{
						     that.dessertList.map((items,indexs)=>{
						     	   if(item.dessert_id==items.id){
						     		  item.dessert_text=items.title;
									  item.dessertIndex=indexs;									 
						     	   }
						        })
						      
					     })
					 }  
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })						 
			},
			
			getData(e){
			  let that=this										
			  sun.request({
				url: e.read,
				showLoading: true,
				token:true,
				data:{
					order_id:e.order_id
				},
				success(res) {				
					if(res.code==200){								 
					    that.dessertList = res.data.list?res.data.list:'';						
						that.confirmList= res.data.confirmList?res.data.confirmList:''
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })						 
			},
			//选择点心
			chooseDessert(e){				
				 let arrayIndex =e.currentTarget.dataset.type;	 
				 this.dessertIndex=e.target.value;
				 this.dessert[arrayIndex].dessertIndex=e.target.value;
				 this.dessert[arrayIndex].dessert_id = this.dessertList[this.dessertIndex].id;
				 this.dessert[arrayIndex].dessert_text = this.dessertList[this.dessertIndex].title;
				 this.$forceUpdate()
			},
			//删除点心
			deleteDian(indexD){
				this.dessert[indexD].dessertIndex=''; 
				this.dessert[indexD].dessert_id =''
				this.dessert[indexD].dessert_text =''
				this.$forceUpdate()
			},
			//删除点心
			deleteDessert(index){
				this.dessert.splice(index, 1);
			},
			//添加点心
			addDessert(){
				this.dessert.push({
					dessert_id:'',
					dessert_text:'',
					dessert_amount:"",//数量
					dessert_price:"",//金额
					dessert_remark:"",//备注
					dessertIndex:''
				})
			},
			//提交审核
			saveFn(){			    
				let that=this;			
				sun.request({
					url: that.options.api,
					showLoading: true,
					token:true,
					data:{	
						order_id:that.options.order_id,						
						dessertList:that.dessert?JSON.stringify(that.dessert):'',																		
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			// 编辑提交
			editFn(api,id){
				let that=this;
				sun.request({
					url: api,
					showLoading: true,
					token:true,
					data:{
						order_confirm_id:that.options.id,
						id:id?id:'',
						dessertList:that.dessert?JSON.stringify(that.dessert):'',																	
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			//底部评论按钮
			resubmits(item){				
				if(item.label=='同意'||item.label=='拒绝'||item.label=='评论'){
					this.commentFn(item)
				}else{
				   this.editFn(item.api,item.id)	
				}
								
			},
			// 编辑提交
			commentFn(e){
				let that=this;
				sun.request({
					url: e.api,
					showLoading: true,
					token:true,
					data:{						
						id:that.options.id?that.options.id:'',						
						content:e.content?e.content:'',
						image:e.image?e.image:'',
					},
					success(res) {
					  if(res.code==200){													
							uni.showToast({
								icon:"none",
								title:res.msg
							})
			               that.getDetail(that.options)																	
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
		}
	}
</script>

<style lang="less">
@import '../common.less';
</style>
